<%@ page language="java" contentType="text/html;charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


<script src="<c:url value='/js/jquery.form.js'/>"></script>
<script type="text/javascript">
    $(document).ready(function(){
       /*  var options = {
            success : function(data) {
                $("#working-area").html(data);
            }
        };
        $("#add-group-form").ajaxForm(options); */
    });
    function jumpTo(url){
        $.ajax({  
            type : "GET",  
            async : false,  //同步请求  
            url : url,  
            timeout:1000,  
            success:function(projects){  
                $("#working-area").html(projects);//要刷新的div  
            },  
            error: function() {  
                alert("ERROR!");
            }  
        });  
    }
    
</script>

<div>
	<div class="">
        <h3 style="margin-top: auto">
            设计模式组件
        </h3>
        <!-- div class="form-inline">
            <div>
            <form class="form-search" action="<%=request.getContextPath()%>/aadl/template" method="POST" onsubmit="return valid();">
                <label class="control-label">名称</label>
                <input type="text" style="margin-left: 10px;" class="input-large" placeholder="设计模式类型名称" id="template_name">
                <label style="margin-left: 50px;">描述信息</label>
                <input type="text" style="margin-left: 10px;" class="input-xlarge"  placeholder="设计模式组件描述信息" id="template_description">
                <button type="submit" style="margin-left: 10px;width: 100px" class="btn" id="btn_add_div"><i class="icon-search"></i>&nbsp;开始检索</button>
            </form>
            </div>
         </div -->
	</div>
	<hr />
	<div class="">
		<table class="table table-hover">
		    <tr>
				<th width="10%">编号</th>
				<th width="20%">名称</th>
				<th width="20%">类别</th>
				<th width="20%">创建者</th>
				<th width="30%">操作</th>
			</tr>
			<c:forEach items="${designPatternCategorys}" var="designPatternCategory" varStatus="status">
				<tr>
					<td>${status.count}</td>
					<td>${designPatternCategory.name}</td>
					<td>${designPatternCategory.pgroup.name}</td>
					<td>${designPatternCategory.owner.username}</td>
					<td>
						<div class="btn-group">
							 <button class="btn" onclick="showDesignPatternCategoryInfo('${designPatternCategory.description}')">
                                <i class="icon-search"></i>&nbsp;详细信息
                            </button>
							<c:choose>
								<c:when test="${designPatternCategory.owner.id == user.id }">
									<a class="btn" href="/ManEnv/designPatternCategory/${designPatternCategory.id}/entityZone/edit">
										<i class="icon-pencil"></i>&nbsp;编辑
									</a>
									<button class="btn" name="" onClick="showDeletePanel('${designPatternCategory.id}', '${designPatternCategory.name}', this)">
                                        <i class="icon-trash"></i>&nbsp;删除
                                    </button >
								</c:when>
								<c:otherwise>
								     <a class="btn" href="/ManEnv/designPatternCategory/${designPatternCategory.id}/entityZone/scan"><i class="icon-search" ></i>&nbsp;查看</a>
								</c:otherwise>
							</c:choose>
							
						</div>
					</td>
				</tr>
			</c:forEach>
			<tr>
			</tr>
		</table>
	</div>

</div>

<div class="modal hide fade" id="design-pattern-category-info-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>显控设计模式组件详细信息</h3>
    </div>
    <div class="modal-body">
        <p id="design-pattern-category-info"></p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
    </div>
</div>

<div class="modal hide fade" id="delete-design-pattern-category-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除显控设计模式组件</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除显控设计模式组件 <span id="design-pattern-category-name"></span>?</p>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal" id="delete-design-pattern-category-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>
<!-- Le javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript">
    function deleteDesignPatternCategory(dpcId, deleteBtn) {
        $.ajax({
            url : '/ManEnv/project/' + dpcId + '/delete',
            type : 'DELETE',
            success : function(data) {
                 if (data.result == "true") {
                      alert("删除成功!");
                      $(deleteBtn).parents("tr").remove(); // 删除第一个tr元素
                 } else {
                      alert("删除失败!");
                 }
            }
        });

    }
    
    function showDeletePanel(dpcId, dpcName, deleteBtn){
        $("#delete-design-pattern-category-panel").modal({
            "show" : true,
            "backdrop" : false
        });
        $("#design-pattern-category-name").html(dpcName);
        $("#delete-design-pattern-category-btn").click(function(){
        	deleteDesignPatternCategory(dpcId, deleteBtn);
        });
    }
    
    function showDesignPatternCategoryInfo(data){
        $("#design-pattern-category-info").html(data);
        $("#design-pattern-category-info-panel").modal({"show":true, "backdrop":false});
    }
</script>

